<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParam.name" size="small" placeholder="任务名称" clearable class="filter-item form-search-input" />
      <el-select v-model="queryParam.status" size="small" clearable placeholder="请选择执行状态" class="filter-item" style="margin-right: 5px">
        <el-option value="1" label="启用" />
        <el-option value="2" label="禁用" />
      </el-select>
      <el-button size="small" class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        重置
      </el-button>
      <router-link to="/monitor/crontab/log">
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-guide" style="margin-left: 5px">
          日志
        </el-button>
      </router-link>
      <el-button v-action="'crontab@save'" size="small" class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate()">
        新增
      </el-button>
    </div>
    <div v-loading="loading">
      <el-table ref="multipleTable" :data="data" :max-height="screenHeigh" tooltip-effect="dark" style="width: 100%" border>
        <el-table-column label="编号" prop="id" width="80" align="center" />
        <el-table-column label="名称" prop="name" align="center" width="150" />
        <el-table-column prop="group" label="分组" align="center" width="110">
          <template slot-scope="cron">
            {{ cron.row.group === 1 ? '默认' : '系统' }}
          </template>
        </el-table-column>
        <el-table-column prop="task" label="Command指令" align="center" width="170" />
        <el-table-column prop="cron" label="cron表达式" align="center" />
        <el-table-column prop="status" label="状态" align="center" width="160">
          <template slot-scope="cron">
            <span>
              <el-switch v-model="cron.row.status" :disabled="setPermissions()" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="2" @change="disOrEnableCron(cron.row)" />
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center" width="170" />
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="cron">
            <el-button v-action="'crontab@update'" type="primary" size="small" icon="el-icon-edit" @click="handleUpdate(cron.row)" />
            <el-button type="danger" :disabled="true" size="small" icon="el-icon-delete" @click="handleDelete(cron.row.id)" />
            <router-link :to="'/monitor/crontab/log/' + cron.row.id" style="margin-left: 5px">
              <el-button size="small" icon="el-icon-guide">日志</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50,100,200,500]" :page-size="queryParam.limit" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-------- 回到顶部 ------------>
    <el-backtop :visibility-height="100">
      <i class="el-icon-caret-top" />
    </el-backtop>
    <!----------------------------------- 任务 ---------------------------------------------->
    <el-dialog :title="title" :visible.sync="formVisible" width="40%" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="任务名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formFieldsData.name" style="width: 92%" placeholder="请输入任务名称" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="分组" :label-width="formLabelWidth">
          <el-radio v-model="formFieldsData.group" :label="1" checked>默认</el-radio>
          <el-radio v-model="formFieldsData.group" :label="2">系统</el-radio>
        </el-form-item>
        <el-form-item label="Command指令" :label-width="formLabelWidth" prop="task">
          <el-input v-model="formFieldsData.task" style="width: 92%" placeholder="请输入Command指令" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="cron 表达式" :label-width="formLabelWidth" prop="cron">
          <el-input v-model="formFieldsData.cron" style="width: 92%" placeholder="请输入 cron 表达式" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="执行策略" :label-width="formLabelWidth">
          <el-radio v-model="formFieldsData.status" :label="1" checked>启用</el-radio>
          <el-radio v-model="formFieldsData.status" :label="2">禁用</el-radio>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="formFieldsData.tactics" :label="1" checked>立即执行</el-radio>
          <el-radio v-model="formFieldsData.tactics" :label="2">执行一次</el-radio>
          <el-radio v-model="formFieldsData.tactics" :label="3">正常执行</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="formFieldsData.remark" type="textarea" autosize placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'
import cacheList from '@/layout/mixin/cacheList'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'SystemCrontab',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 335,
      componentName: 'SystemCrontab',
      formName: 'crontab',
      formLabelWidth: '120px',
      // 用户搜索
      queryParam: {
        name: '',
        status: '',
        limit: 50
      },
      formVisible: false,
      formFieldsData: {
        name: '',
        group: 1,
        task: '',
        cron: '',
        tactics: 1,
        status: 1,
        remark: ''
      },
      url: 'monitor/crontab',
      // 表单验证
      rules: {
        name: [
          { required: true, message: '请输入任务名称', trigger: 'blur' },
          { max: 100, message: '最大支持 100 个字符', trigger: 'blur' }
        ],
        task: [
          { required: true, message: '请输入Command指令', trigger: 'blur' },
          { pattern: /^[a-zA-Z:]+$/, message: 'command 指令格式错误', trigger: 'blur' }
        ],
        cron: [
          { required: true, message: '请输入cron表达式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    disOrEnableCron(cron) {
      this.$http.put(this.url + '/enable/' + cron.id).then(response => {
        this.$message.success(response.message)
      })
    },
    // 按钮权限
    setPermissions() {
      // console.log(this.$store.state.user.permissions)
      const permissions = this.$store.state.user.permissions
      let bol = true
      for (let i = 0; i < permissions.length; i++) {
        if (permissions[i].permission_mark === 'crontab@disOrEnable') {
          bol = false
        }
      }
      return bol
    }
  }
}
</script>

<style scoped>
.filter-container {
  border: none;
}
</style>
